<template>
	<view class='interactive-swiper'>
		<swiper :autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration" @change="swiperChange">
			<block v-for="(item, index) in imgUrls" :key="index">
				<swiper-item>
					<!-- Custom layout for the first slide -->
					<view v-if="index === 0 && item.type === 'custom'" class="swiper-item-container custom-layout">
						<image class="gif-character" :src="item.gif_url" mode="aspectFit"></image>
						<view class="content-right">
							<view class="title-container">
								<text class="title">{{ item.title }}</text>
							</view>
							<view class="button-wrapper">
								<view 
									class="custom-button" 
									v-for="(btn, btnIndex) in item.buttons" 
									:key="btnIndex"
									@tap="handleButtonClick(btn)"
								>
									<text class="button-text">{{ btn.text }}</text>
									<text v-if="btn.hot" class="hot-badge">热</text>
									<text class="arrow-icon">›</text>
								</view>
							</view>
						</view>
					</view>
					<!-- Default layout for other slides -->
					<view v-else class="swiper-item-container" @tap="navigateTo(item.link)">
						<image class="slide-image" :src="item.img" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</block>
		</swiper>
		<view class="dots acea-row">
			<view class="dot" :class="index == currentSwiper ? 'active' : ''" v-for="(item, index) in imgUrls" :key="index"></view>
		</view>
	</view>
</template>

<script>
// +----------------------------------------------------------------------
// | panweidongAI编程开发者  
// +----------------------------------------------------------------------
// | 联系379247101@qq.com   公司：AI技术部
// +----------------------------------------------------------------------
// | Author: panweidong <379247101@qq.com>
// +---------------------------------------------------------------------- -->
export default {			
	props: {
		imgUrls: {
			type: Array,
			default: function() {
				return [{
					type: 'custom',
					gif_url: 'https://i.ibb.co/RRFxksQ/bulala.webp',
					title: '热门活动',
					buttons: [{
						text: '查看详情',
						hot: true,
						link: ''
					}, {
						text: '立即参与',
						hot: false,
						link: ''
					}],
				}];
			}
		}
	},
	data() {
		return {
			circular: true,
			autoplay: true,
			interval: 3000,
			duration: 500,
			currentSwiper: 0
		};
	},
	
	methods: {
		swiperChange(e) {
			this.currentSwiper = e.detail.current;
		},
		
		handleButtonClick(btn) {
			// 触发自定义事件，让父组件可以处理
			this.$emit('button-click', btn);
		},
		
		navigateTo(url) {
			if (!url) return;
			uni.navigateTo({
				url: url
			});
		}
	}
}
</script>

<style scoped lang="scss">
.interactive-swiper {
	width: 100%;
	height: 410rpx;
	position: relative;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	


	swiper {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.swiper-item-container {
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
	}

	.custom-layout {
		background: linear-gradient(90deg, #a8cfff 0%, #fbc2eb 100%);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		height: 100%;
		box-sizing: border-box;
	}
	.gif-character {
		width: 250rpx;
		height: 100%;
	}
	.content-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 20rpx;
	}
	.title-container {
		margin-bottom: 20rpx;
		.title {
			font-size: 34rpx;
			font-weight: bold;
			color: #333;
		}
	}
	.button-wrapper {
		display: flex;
		flex-direction: column;
		gap: 18rpx;
		margin-top: 10rpx;
	}
	.custom-button {
		background-color: #fff;
		border-radius: 40rpx;
		padding: 15rpx 20rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
		width: 90%;
		margin-left: auto;
		margin-right: 10rpx;
		&:active {
			opacity: 0.8;
		}
		.button-text {
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}
		.hot-badge {
			background-color: #ff4d4f;
			color: #fff;
			font-size: 20rpx;
			padding: 2rpx 10rpx;
			border-radius: 6rpx;
			margin-left: 10rpx;
		}
		.arrow-icon {
			font-size: 30rpx;
			color: #999;
			margin-left: 10rpx;
		}
	}

	.slide-image {
		width: 100%;
		height: 100%;
	}
	
	.dots {
		position: absolute;
		right: 40rpx;
		bottom: 20rpx;
		
		.dot {
			width: 12rpx;
			height: 12rpx;
			border: 2rpx solid #fff;
			background-color: transparent;
			border-radius: 50%;
			margin-right: 15rpx;
			
			&.active {
				border-color: #e93323;
				background-color: #e93323;
			}
		}
	}
}
</style> 